<style>
    .main_cnt{
        margin: 0 auto;
        width: 400px;
    }

    .input_cnt{
        padding-left: 2px;
        font-size: 14px;
        color: #111;
    }

    li{
        list-style: none;
        height: 35px;
    }

    label {
        width: 100px;
        display: inline-block;
        text-align: right;
    }

    input[type="button"]{
        margin-left: 200px;
    }

</style>
<script type="text/javascript" src="/DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
<h2 style="text-align: center;">请输入注册信息</h2>

<div class="main_cnt">
    <ul>
        <li>
            <label>登录名：</label>
            <input id="login_name" class="input_cnt" type="text" maxlength="50" validate="minlength:6" title="请输入注册登录名，最小6位">
        </li>
        <li>
            <label>密码：</label>
            <input id="password" class="input_cnt" type="password"/>
        </li>
        <li>
            <label>确认密码：</label>
            <input id="password0" class="input_cnt" type="password"/>
        </li>
        <li>
            <label>姓名：</label>
            <input id="user_name" class="input_cnt" type="text"/>
        </li>
        <li>
            <label>性别：</label>
            <select id="gender" class="input_cnt">
                <option selected="selected" value="">---请选择---</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </li>
        <li>
            <label>出生日期：</label>
            <input id="birth_day" class="input_cnt" onclick="WdatePicker({isShowWeek:true,lang:'zh-cn',startDate:'1988-06-01'})"/>
        </li>
        <li>
            <label>职业：</label>
            <input id="career" class="input_cnt" type="text"/>
        </li>
    </ul>
    <input id="submit_btn" type="button" value="提交"/>
</div>
<script>
    $(function(){
        $("#login_name").on("keyup",() => {
            $("#login_name").val($("#login_name").val().replace(" ",""))
        })

        $("#password").on("keyup",() => {
            $("#password").val($("#password").val().replace(" ",""))
        })

        $("#password0").on("keyup",() => {
            $("#password0").val($("#password0").val().replace(" ",""))
        })

        $("#user_name").on("keyup",() => {
            $("#user_name").val($("#user_name").val().replace(" ",""))
        })

        $("#gender").on("keyup",() => {
            $("#gender").val($("#gender").val().replace(" ",""))
        })

        $("#birth_day").on("keyup",() => {
            $("#birth_day").val($("#birth_day").val().replace(" ",""))
        })

        $("#career").on("keyup",() => {
            $("#career").val($("#career").val().replace(" ",""))
        })

        $("#submit_btn").click(function(){
            var loginName = $("#login_name").val();
            if(loginName == null || loginName == "" || loginName == undefined){
                alert("登录名不能为空！")
                $("#login_name").focus();
                return;
            }

            var password = $("#password").val();
            if(password == null || password == "" || password == undefined){
                alert("密码不能为空！")
                $("#password").focus();
                return;
            }

            var password0 = $("#password0").val();
            if(password0 == null || password0 == "" || password0 == undefined){
                alert("请再次确认！")
                $("#password0").focus();
                return;
            }

            if(password != password0){
                alert("前后密码不一致！")
                $("#password0").focus();
                return;
            }

            var userName = $("#user_name").val();
            if(userName == null || userName == "" || userName == undefined){
                alert("姓名不能为空！")
                $("#user_name").focus();
                return;
            }

            var gender = $("#gender option:selected").val();
            if(gender == null || gender == "" || gender == undefined){
                alert("请选择性别！")
                $("#gender").focus();
                return;
            }

            var birthDay = $("#birth_day").val();
            if(birthDay == null || birthDay == "" || birthDay == undefined){
                alert("出生日期不能为空！")
                $("#birth_day").focus();
                return;
            }

            var career = $("#career").val();
            if(career == null || career == "" || career == undefined){
                alert("职业不能为空！")
                $("#career").focus();
                return;
            }

            $.ajax({
                url:"/user/register",
                data:{"loginName":loginName,"password":password,"password0":password0,"userName":userName,
                        "gender":gender,"birthDay":birthDay,"career":career},
                type:"post",
                dataType:"json",
                success:function(data){
                    if("success" == data.message){
                        var rs = confirm("注册成功，请重新登录！");
                        if(rs){
                            window.location.href="/"
                        }
                    }else if("fail" == data.message){
                        alert('注册失败！');
                    }else if("exception" == data.message){
                        alert("系统异常，请联系系统管理员！");
                    }else{

                    }
                },
                error: function(){
                    alert("系统异常，请联系系统管理员！");
                }
            })
        })
    })
</script>